<!--
 * @Author: cly
 * @Date: 2021-07-10 08:16:36
 * @LastEditTime: 2021-07-13 17:28:58
 * @LastEditors: cly
 * @Description: Never give up
 * @FilePath: \briup_cly\day02\xxtx-ui\index.html
 * @sxnd1006
-->
<!--HTML5文档类型---->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行学天下首页</title>
    <link rel="stylesheet" href="css/index.css">
  <!-- 从静态资源服务器引入jQuery  bootcdn 加速服务-->
   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"> </script>
   
  </script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div class="header">

            <div class="headLeft" >
                <div class="login">
                游学天下
                </div>
                <div class="title">
                行学天下
                </div>    
            </div>
            <div class="headRight">
                <div class="callMe">
                    <a href="#callMe">
                    <img src="image/callMe.jpg" alt="图片丢失了">
                       致电我们  
                    </a>                           
                </div>       
            </div>  
        </div> 
        <!--轮播图-->   
        <!-- <div class="lunBoTu">
      <div class="lunBoTuImg">
        <ul>
          <li class="item" style="display: block;">
            <img src="image/picture1.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture2.jpg" alt="图片丢失">
          </li>
          <li class="item">
            <img src="image/picture3.jpg" alt="图片丢失">
          </li>
        </ul>
      </div>
      <div class="lnBtn">
        <div class="lastBtn">
          <img src="image/last.png" alt="图片丢失">
        </div>
        <div class="nextBtn">
          <img src="image/next.png" alt="图片丢失">
        </div>
      </div>
      <div class="smallBtn">
        <ul>
          <li class="btn active"></li>
          <li class="btn"></li>
          <li class="btn"></li>
        </ul>
      </div>
    </div> -->
        <!-- 引入组件库的轮播图 -->
        <!-- {{carousel}} -->
        <el-carousel :interval="5000" arrow="always">
           <el-carousel-item v-for="item in carousel" :key="item.id">
               <img :src="item.url" alt="">
           </el-carousel-item>
        </el-carousel>
       <!--精选游学项目-->
        <div class="youxue">
            <div class="myH2">
                精选游学项目
            </div>
            <div class="myUl" v-for="item in project" @click="toDetails(item.id)">
                <img v-if="!item.figure" src="image/image/img1.jpg" alt="">
                <img v-else :src="item.figure" alt="">
                <div class="title">{{item.name}}</div><br>
                <div class="data">{{formatDate(item.beginTime) }} ~ {{formatDate(item.endTime)}}</div>
                <div class="city">{{item.region}}</div>
                <div class="desc">{{item.introduce}}</div>
            </div>
        </div>
         <!-- 学生风采 -->
        <div class="fengCai">
            <div class="myH2">
              学生风采
            </div>
            <div class="myFenCaiDiv">
              <!-- {{article}} -->
                <div class="myFenCai" v-for="item in article" @click="toFenCai(item.id)">
                    <img v-if="!item.cover" src="image/image/img2.jpg" alt="">
                    <img v-else :src="item.cover" alt="">
                    <div class="title">{{item.title.length < 22?item.title:item.title.slice(0,22)+'...'}}</div>
                    <div class="date">{{formatDate(item.publishTime)}}</div>
                    <div class="name">{{item.baseUser.realname}}</div>
                    <div class="like">🌟{{item.thumpUp}}</div>
                    <div class="likeBtn">
                        <el-button type="warning" icon="el-icon-star-off"
                        @click="dianZan(item.id)"></el-button>                   
                        </el-button>
                    </div>
                </div>
                
            </div>
        </div>   
        <!-- 常见问题 -->
        <div class="wenTi">
            <div class="myH2">
                常见问题
            </div>
            <div class="myWenTi">
                <div class="title">
                    孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？
                </div> <br><br>                  
                <div class="desc">其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成
                    长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适
                    应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得
                    不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平
                    等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去
                    的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的
                    经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的
                    领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF
                    系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而
                    领队也会随时和家长保持联系。
                </div>
                <img src="image/image/tu1.png" alt="图片丢了"><br><br>
            </div>        
        </div>
        <!--页面底部消息-->
        <div class="footer">
            <div class="callMe" id="callMe">
                联系我们 （工作时间:9:00-17:00)
                400-860-0987
                <a href="https://briup.cn">sxnd@rjxu.net</a>
                <a target="_black" href="https://briup.cn">在线客服</a>
            </div>
            <div class="beiAn">
                <a href="http://beian.miit.gov.cn">京x备xxxxxxxxxx号</a>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo">公安备案号0000000</a>
            </div>
            <div class="callMe">
                @山西农业大学软件学院
            </div>
        </div>
    </div>       
       
</body>

<!--请求网络数据-->
<!--
    <script>
    var index=0;
    var timer;
    //通过定时器来切换图片
    function myTimer(){
        timer = setInterval(
            function(){
                index++;
                if(index>2){
                    index=0;
                }
                $('.item').eq(index).show().siblings().hide();
                //切换小圆点样式
                $('.btn').eq(index).addClass('active').siblings().removeClass('active');
            },2000
        )
    }    
    this.myTimer();
    var that=this;//声明变量，this传递
    //通过左右键切换图片
    $('.nextBtn').click(function(){
        index++;
        if(index>2){
            index=0;
        }
        $('.item').eq(index).show().siblings().hide();
        //切换小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    //重置计时器
    clearInterval(timer);
    that.myTimer();
    });
    $('.lastBtn').click(function(){
        index--;
        if(index<0){
            index=2;
        }
        $('.item').eq(index).show().siblings().hide();
        //切换小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    //重置计时器
    clearInterval(timer);
    that.myTimer();
    });
    //点击小圆点切换图片
    $('.btn').click(function(){
        //获取用户点击的列表下标
        index=$(this).index();
        //切换图片
        $('.item').eq(index).show().siblings().hide();
        //点击小圆点时添加样式
        $(this).addClass('active').siblings().removeClass('active')
        //重置定时器
        clearInterval(timer);
        that.myTimer();
    })
</script>
-->
<script>
    new Vue({
      el: '#app',
      data: {
        project: [],
        article: [],
        carousel: [],
      },
      created() {
        this.findProject();
        this.findArticle();
        this.findCarousel();
      },
      methods: {
        // 查询游学项目
        findProject() {
          axios.get('http://47.94.46.113:8888/index/project/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
            this.project = res.data.data.list
          })
        },
        // 将时间戳格式化
        formatDate(date) {
          return moment(date).format('YYYY-MM-DD')
        },
        // 查询学生风采
        findArticle() {
          axios.get('http://47.94.46.113:8888/index/article/pageQuery?page=1&pageSize=10&status=审核通过').then((res) => {
            this.article = res.data.data.list
          })
        },
        // 查询所有轮播图
        findCarousel() {
          axios.get('http://47.94.46.113:8888/index/carousel/findAll').then((res) => {
            this.carousel = res.data.data
          })
        },
        // 跳转到游学项目详情页面
        toDetails(id) {
          window.location.href = "details.html?id=" + id;
        },
        toFenCai(id){
          window.location.href = "fengcai.html?id=" + id;
        },
        //学生风采点赞
        dianZan(id){
          axios.get('http://47.94.46.113:8888/index/article/thumbUp?id='+id).then((res) => {
            //console.log(res);
            //刷新点赞数
            this.findArticle();
          })
         event.stopPropagation();
        }
      }
    })
  </script>
  
</html>